<!-- 创建时间: 2020年12月19日 星期六 00:30 -->
<template>
    <div class="manageClass_container">
        <center>
            <h3>班级管理</h3>
        </center>
        <!-- 操作栏 -->
        <el-row>
            <div class="grid-content bg-purple-dark">
                <el-col :md="4" :xs="8">
                    <el-button type="primary" round @click="showMask=!showMask"><i class="el-icon-circle-plus-outline"></i>创建班级</el-button>
                </el-col>
                <el-col :md="10" :xs="16">
                    <el-input placeholder="请输入内容" v-model="inputSearch">
                        <el-select v-model="selectSearch" slot="prepend" placeholder="请选择">
                            <el-option label="班级名" value="1"></el-option>
                            <el-option label="班级号" value="2"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
            </div>
        </el-row>
    
        <!-- 班级列表 -->
        <el-row class="class_row" :gutter="10">
            <el-col :md="6" :sm="6" v-for="(item, index) in classList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" :key="index">
                <el-card class="box-card">
                    <el-row>
                        <el-col :md="9" :xs="6">
                            <div class="circular">{{item.className.substr(0, 4)}}</div>
                        </el-col>
                        <el-col :md="15" :xs="18">
                            <div class="classInfo">
                                <el-tag class="classInfo_className" type="info">{{item.className}}</el-tag>
                                <br>
                                <el-tag class="classInfo_classNumber" type="info">{{item.classNumber}}</el-tag>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="deleteClass">
                        <el-link type="info" @click="studentManage(item.classNumber, item.className)">学生管理</el-link>
                        <el-link type="info" @click="deleteClass(item.classNumber, item.className)">删除班级</el-link>
                    </div>
                </el-card>
            </el-col>
            <div class="nullClass" v-if="classList.length==0">暂无班级</div>
        </el-row>
        <el-dialog title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%" :show-close="true">
            <span>{{dialogText}}</span>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirm">确 定</el-button>
                    </span>
        </el-dialog>
        <el-row>
            <el-col :md="8" :xs="4" :offset="8" style="text-align:center;margin-bottom:15px;">
                <el-pagination small layout="prev, pager, next" :total="classList.length" :page-size="pagesize" :current-page.sync="currentPage" :pager-count="pagerCount">
                </el-pagination>
            </el-col>
        </el-row>
    
        <!-- 创建班级 -->
        <div class="mask" v-show="showMask" @click="showMask=!showMask"></div>
        <transition name="el-zoom-in-center">
            <el-card class="transition-box" v-show="showMask">
                <el-divider><i class="el-icon-user"></i></el-divider>
                <el-form :label-position="labelPosition" :rules="rules" ref="ruleForm" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="班级名称" prop="className">
                        <el-input v-model="formLabelAlign.className" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="班级号" prop="classNumber">
                        <el-input v-model="formLabelAlign.classNumber" clearable></el-input>
                    </el-form-item>
                </el-form>
                <center>
                    <el-button round @click="createClass('ruleForm')">创建</el-button>
                </center>
            </el-card>
        </transition>
        <el-button plain @click="openInfoTips" style="display: none"></el-button>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import $ from "jquery";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            pagesize: 12, //每页多少数据
            currentPage: 1, //默认当前页为第一页
            pagerCount: 5, //页码按钮的数量，当总页数超过该值时会折叠
            inputSearch: "", // 输入搜索内容
            selectSearch: "1", // 选择搜索条件
            classList: [], // 班级数组数据
            showMask: false, // 显示隐藏遮罩
            labelPosition: "top", // 表单中label位置 left right top
            formLabelAlign: { // 创建班级信息
                className: '软件工程3班',
                classNumber: '2006833',
            },
            rules: { // 创建班级信息验证
                className: [
                    { required: true, message: '请输入班级名称', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                classNumber: [
                    { required: true, message: '请输入班级号', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            },
            dialogVisible: false, // 显示隐藏删除班级确认对话框
            dialogText: "", // 提示信息文本
            dislogConfirm: "", // 保存确认删除班级号
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 创建班级
        createClass(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post("createClass", { classArr: JSON.stringify(this.formLabelAlign) }).then(res => {
                        if (res.bodyText == "true") {
                            this.showMask = false;
                            this.openInfoTips("更新【", this.formLabelAlign.className + "】<b style='color:green;'>创建成功</b>", "success", 3000);
                            this.classList.push(this.formLabelAlign);
                            this.formLabelAlign = { className: '', classNumber: '', };
                        } else {
                            this.openInfoTips("失败【", this.formLabelAlign.classNumber + "】<b style='color:red;'>创建失败，班级已存在</b>", "error", 3000);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 删除班级
        deleteClass(classNumber, className) {
            this.dialogVisible = true;
            this.dialogText = "删除班级 " + className + " 同时会删除本班所有学生";
            this.dislogConfirm = [classNumber, className];
        },
        // 删除班级--确认对话框
        confirm() {
            this.$http.post("deleteClass", { classNumber: this.dislogConfirm[0] }).then(res => {
                if (res.body == true) {
                    for (let i = 0; i < this.classList.length; i++) {
                        if (this.classList[i].classNumber == this.dislogConfirm[0]) {
                            this.classList.splice(i, 1);
                        }
                    }
                    this.openInfoTips("更新", "班级【" + this.dislogConfirm[1] + "】<b style='color:green;'>删除成功</b>", "success", 3000);
                } else {
                    this.openInfoTips("失败", "班级【" + this.dislogConfirm[1] + "】<b style='color:red;'>删除失败</b>", "error", 0);
                }
                this.dialogVisible = false;
            })
        },
        // 学生管理
        studentManage(classNumber, className) {
            this.$router.push({
                path: "/studentManage",
                query: [classNumber, className]
            });
        },
        openInfoTips(title, message, type, duration) {
            this.$notify({
                title: title,
                message: message,
                type: type,
                duration: duration,
                dangerouslyUseHTMLString: true,
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        let loading  = this.$loading({
            lock: true,
            text: '数据加载中,请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$http.get("adminGetClassList").then(res => {
            this.classList = res.body;
            loading.close();
        });
    },

    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.manageClass_container {
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        padding: 10px 10px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .el-select .el-input {
        width: 130px;
    }
    .class_row {
        margin-top: 13px;
        .box-card {
            height: 200px;
            margin-bottom: 13px;
            position: relative;
            .circular {
                width: 100px;
                height: 100px;
                background-color: #3690e4;
                border-radius: 50%;
                color: white;
                text-align: center;
                font-weight: bold;
                line-height: 100px;
            }
            .classInfo {
                .classInfo_className {
                    margin-bottom: 10px;
                }
            }
            .deleteClass {
                position: absolute;
                right: 0;
                bottom: 0;
                a {
                    color: #c8cbd0;
                }
            }
        }
        .box-card:hover {
            cursor: pointer;
            transform: scale(1.01);
            border: 1px solid salmon;
        }
        .nullClass {
            text-align: center;
            font-size: 24px;
            color: darkgray;
        }
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
    }
    .transition-box {
        width: 950px;
        height: 500px;
        background: #fff;
        z-index: 101;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow: auto;
        button {
            padding-left: 60px;
            padding-right: 60px;
        }
    }
}
</style>
